<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.RegistrationGifts') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('RegistrationGifts-save')" @click="btnOk">保存</el-button>
        </template>
      </PageTitle>
      <el-row :span="24" style="margin-top: 20px;">
        <el-form ref="ruleForm" :model="list" label-width="180px" style="max-height: 750px;overflow-y: auto;">
          <el-form-item label="状态:">
            <el-radio v-model.number="list.status" :label="1">开启</el-radio>
            <el-radio v-model.number="list.status" :label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="赠送余额:">
            <el-input v-model.number="list.money" style="width: 10%;" />
          </el-form-item>
          <el-form-item label="赠送积分:">
            <el-input v-model.number="list.score" style="width: 10%;" />
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model.number="list.starttime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
              style="width:20%"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model.number="list.endtime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
              style="width:20%"
            />
          </el-form-item>
          <el-form-item label="赠送优惠券开启:">
            <el-radio v-model.number="list.give_coupon" :label="1">开启</el-radio>
            <el-radio v-model.number="list.give_coupon" :label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item v-if="list.give_coupon===1" label="赠送优惠券">
            <div>
              <table class="ljm-table" cellspacing="0" cellpadding="0">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>优惠券名称</th>
                    <th>库存</th>
                    <th>{{ $t('table.actions') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in couponListObj" :key="index">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.stock }}</td>
                    <td>
                      <el-button size="mini" @click="removeFreightArr('cate',index)">{{ $t('button.delete') }}</el-button>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4">
                      <el-button type="primary" size="mini" plain @click="openFreight('cate')">{{ $t('button.add') }}</el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <!-- 优惠券选择 -->
    <el-dialog title="优惠券选择" :visible="showDialogS" width="50%" @close="btnCanleS">
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="6">
          <el-input v-model="queryS.name" type="text" :placeholder="$t('table.productName')" />
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="searchS">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="downloadLoadingS" tooltip-effect="dark" border :data="listS" max-height="650px" style="margin-top: 20px;">
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column prop="name" label="名称" />
        <el-table-column :label="$t('table.stock')" prop="stock" />
        <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="selectS(row)">{{ $t('button.select') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="countS" :page-size="queryS.limit" :current-page="queryS.page" @current-change="changPageS" />
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { GetRegisterGiveset, EditRegisterGiveset, CouponList } from '@/api/user'
export default {
  data() {
    return {
      showDialogS: false,
      downloadLoadingS: false,
      countS: 0,
      listS: [],
      queryS: {
        name: '',
        aid: 1,
        limit: 10,
        page: 1
      },
      statusData: [{
        id: 1,
        value: this.$t('table.normal')
      },
      {
        id: 2,
        value: this.$t('table.deactivate')
      }],
      list: {},
      couponListObj: []
    }
  },
  created() {
    this.getUserAdmin()
  },
  methods: {
    removeFreightArr(type, index) {
      if (type === 'cate') {
        this.couponListObj.splice(index, 1)
      }
    },
    // 新增一条规格值
    addggname(e) {
      // 获取当前的规格值数量,定义一个对象
      const one = {
        money: undefined,
        give: undefined,
        give_score: undefined
      }
      // 将新的对象追加到当前的数组
      this.listApp.push(one)
    },
    // 移除当前的规格值
    removeggname(k) {
      this.listApp.splice(k, 1)
    },
    // 获取充值赠送
    async getUserAdmin() {
      const one = {
        id: 1
      }
      const { list, couponList } = await GetRegisterGiveset(one)
      this.list = list
      if (this.list.coupon_ids !== '') {
        this.couponListObj = couponList
      }
      this.list.starttime = this.list.starttime * 1000
      this.list.endtime = this.list.endtime * 1000
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        // 格式化推荐商品id
        if (this.couponListObj !== null) {
          if (this.couponListObj.length > 0) {
            const ShopId = []
            this.couponListObj.forEach(item => {
              ShopId.push(item.id)
            })
            this.list.coupon_ids = ShopId.toString(',')
          } else {
            this.list.coupon_ids = ''
          }
        } else {
          this.list.coupon_ids = ''
        }
        console.log(this.list)
        // 调用新增接口
        await EditRegisterGiveset(this.list)
        // 更新数据
        this.getUserAdmin()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 获取商品列表
    async getProductListS() {
      this.downloadLoadingS = true
      const { count, list } = await CouponList(this.queryS)
      this.countS = count
      // 给数组对象使用map循环添加新属性
      this.listS = list
      this.downloadLoadingS = false
    },
    // 打开关联项目选择
    openFreight(type) {
      this.showDialogS = true
      this.getProductListS()
    },
    // 选择商品
    selectS(row) {
      this.couponListObj.push(row)
      this.showDialogS = false
    },
    // 分页
    changPageS(newPage) {
      this.queryS.page = newPage
      this.getListFuWu()
    },
    // 搜索
    searchS() {
      this.queryS.page = 1
      this.getProductListS()
    },
    // 取消推荐商品
    btnCanleS() {
      this.showDialogS = false
    }
  }
}
</script>
<style lang="scss">
  .el-table{
    margin-top:30px
  }
  .item-box{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  .ljm-table{
  thead{
    tr{
      background-color: #f2f2f2;
      th{
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        text-align: left;
      }
    }
  }
  tbody{
    tr{
      margin-top: -1px;
      td{
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        .layui-input{
          display: inline;
          height: 30px;
          padding-left: 10px;
          line-height: 1.3;
          border-width: 1px;
          border-style: solid;
          background-color: #fff;
          border-radius: 2px;
          border-color: #e6e6e6;
        }
        .guanlian{
          display: flex;
          align-items: center;
        }
        div{
          margin: 5px 0px;
          .layui-btn-sm{
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            margin-left: 5px;
          }
          .layui-btn-primary{
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
          }
          .layui-btn {
              display: inline-block;
              white-space: nowrap;
              text-align: center;
              border-radius: 2px;
              cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
